<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绘制圆弧</title>
  </head>
  <body>
    <script>
      (() => {
        const canvas = document.createElement("canvas");
        canvas.width = 400;
        canvas.height = 400;
        document.body.append(canvas);

        const ctx = canvas.getContext("2d");

        const arc = () => {
          ctx.beginPath();
          ctx.arc(100, 100, 50, 0, Math.PI * 2);
          ctx.stroke();

          ctx.beginPath();
          ctx.arc(300, 100, 50, 0, Math.PI, true);
          ctx.stroke();

          ctx.beginPath();
          ctx.arc(100, 300, 50, Math.PI / 2, Math.PI, true);
          ctx.stroke();
        };

        const arcTo = () => {
          ctx.beginPath();
          ctx.moveTo(100, 100);
          ctx.lineTo(100, 300);
          ctx.lineTo(300, 300);
          ctx.stroke();

          ctx.beginPath();
          ctx.arc(200, 200, 100, 0, Math.PI * 2);
          ctx.stroke();

          ctx.beginPath();
          ctx.lineWidth = 4;
          ctx.strokeStyle = "#00f";
          ctx.moveTo(100, 200);
          //   ctx.strokeRect(100, 200, 10, 10);
          ctx.arcTo(100, 300, 200, 300, 200);
          ctx.stroke();
        };
        // arcTo();
        (() => {
          if (ctx) {
            ctx?.arc(100, 100, 50, Math.PI / 2, Math.PI, true);
            ctx?.stroke();
          }
        })();
      })();
    </script>
  </body>
</html>
